import React, { useEffect, useRef, useState } from 'react';
import './index.less';
import {
  Tree,
  Card,
  Button,
  Input,
  Space,
  notification,
  Modal,
  Form,
  TreeSelect,
  Popconfirm,
} from 'antd';

const { confirm } = Modal;
import request from 'umi-request';
function Index() {
  const [api, contextHolder] = notification.useNotification();
  const [treeData, setTreeData] = useState([]);
  useEffect(() => {
    renderList();
  }, []);
  const [ValInfo, setValInfo] = useState(''); //左侧选择当前的id
  // 获取数据
  const renderList = () => {
    request('/api/hyq/get_noticeClassFy', { method: 'get' }).then((res) => {
      setTreeData(res.data);
      // console.log('再次触发渲染')
    });
  };
  // 左侧分类选择
  const onSelect = (selectedKeys, info) => {
    setValInfo(info.node._id);
    formref.current.setFieldValue('classfyName', info.node.classfyName);
    formref.current.setFieldValue('noticeId', info.node.noticeId);
    if (selectedKeys.length === 0) {
      formref.current.resetFields();
      formref.current.setFieldValue('classfyName', '');
      formref.current.setFieldValue('noticeId', '');
      setValInfo('');
    }
  };
  // form表单
  const formref = useRef();
  const [idInfo, setIdInfo] = useState({});

  const onFinish = (values) => {
    console.log('Success:', values, '当前id', ValInfo);
    setIdInfo(values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const [treevalue, setTreeValue] = useState(''); //所属类别   // 书选择
  // 添加公告类别 //form表单中的
  const onChangeTree = (newValue) => {
    setTreeValue(newValue);
    setValInfo(newValue);
    console.log(newValue, '123');
  };

  // 添加分类功能
  const addClassfy = () => {
    request('/api/hyq/addClassfy', {
      method: 'post',
      data: { ...idInfo, ValInfo },
    }).then((res) => {});
  };
  // 保存修改功能
  const editClassfy = () => {
    request('/api/hyq/editClassfy', {
      method: 'post',
      data: { ...idInfo, ValInfo },
    }).then((res) => {});
  };
  // 删除分类功能
  const delClassfy = () => {
    request('/api/hyq/delClasssfy', { method: 'post', data: { ValInfo } }).then(
      (res) => {},
    );
  };
  // 气泡判断是否添加
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const showPopconfirm = () => {
    setOpen(true);
  };
  const handleOk = () => {
    setConfirmLoading(true);
    setTimeout(() => {
      setOpen(false);
      setConfirmLoading(false);
      addClassfy();
      renderList();
    }, 2000);
  };
  const handleCancel = () => {
    console.log('Clicked cancel button');
    setOpen(false);
  };

  // 气泡判断是否保存
  const [open1, setOpen1] = useState(false);
  const [confirmLoading1, setConfirmLoading1] = useState(false);
  const showPopconfirm1 = () => {
    setOpen1(true);
  };
  const handleOk1 = () => {
    setConfirmLoading1(true);
    setTimeout(() => {
      setOpen1(false);
      setConfirmLoading1(false);
      editClassfy();
      renderList();
    }, 2000);
  };
  const handleCancel1 = () => {
    console.log('Clicked cancel button');
    setOpen1(false);
  };
  // 气泡判断是否删除
  const [open2, setOpen2] = useState(false);
  const [confirmLoading2, setConfirmLoading2] = useState(false);
  const showPopconfirm2 = () => {
    setOpen2(true);
  };
  const handleOk2 = () => {
    setConfirmLoading2(true);
    setTimeout(() => {
      setOpen2(false);
      setConfirmLoading2(false);
      // editClassfy()
      console.log('000000');
      delClassfy();
      renderList();
    }, 2000);
  };
  const handleCancel2 = () => {
    console.log('Clicked cancel button');
    setOpen2(false);
  };
  return (
    <div className="Notice_Box">
      <>{contextHolder}</>
      <div className="meanTop">
        <div className="MeansRightHeadBtn">
          {/* */}
          <Popconfirm
            title="是否增加"
            open={open}
            onConfirm={handleOk}
            okButtonProps={{
              loading: confirmLoading,
            }}
            onCancel={handleCancel}
          >
            <Button
              onClick={() => {
                showPopconfirm();
                formref.current.submit();
              }}
            >
              新增
            </Button>
          </Popconfirm>
        </div>
        <div className="MeansRightHeadBtn">
          <Popconfirm
            title="是否保存"
            open={open1}
            onConfirm={handleOk1}
            okButtonProps={{
              loading: confirmLoading1,
            }}
            onCancel={handleCancel1}
          >
            <Button
              onClick={() => {
                showPopconfirm1();
                formref.current.submit();
              }}
            >
              保存
            </Button>
          </Popconfirm>
        </div>
        <div className="MeansRightHeadBtn">
          <Popconfirm
            title="是否删除"
            open={open2}
            onConfirm={handleOk2}
            okButtonProps={{
              loading: confirmLoading2,
            }}
            onCancel={handleCancel2}
          >
            <Button
              onClick={() => {
                showPopconfirm2();
                formref.current.submit();
              }}
            >
              删除
            </Button>
          </Popconfirm>
        </div>
      </div>
      <div className="MeanContentH">
        <div className="MeanLeftH">
          {treeData.length > 0 && (
            <Tree
              treeData={treeData}
              defaultExpandAll={true}
              showLine
              onSelect={onSelect}
              style={{ height: '100vh' }}
              fieldNames={{ title: 'classfyName', key: '_id' }}
            />
          )}
        </div>
        <div className="MeanRightH">
          <Card>
            <Form
              ref={formref}
              name="basic"
              labelCol={{
                span: 4,
              }}
              wrapperCol={
                {
                  // span: 16,
                }
              }
              style={{
                maxWidth: 600,
              }}
              initialValues={ValInfo}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label="分类名称"
                name="classfyName"
                rules={[
                  {
                    required: true,
                    message: '分类名称不能为空',
                  },
                ]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="上级分类"
                name="noticeId"
                rules={[
                  {
                    // required: true,
                    // message: '上级分类不能为空',
                  },
                ]}
              >
                <TreeSelect
                  treeLine
                  style={{
                    width: '250px',
                  }}
                  value={treevalue}
                  dropdownStyle={{
                    maxHeight: 400,
                  }}
                  placeholder="Please select"
                  allowClear
                  treeDefaultExpandAll
                  onChange={onChangeTree}
                  treeData={treeData}
                  fieldNames={{
                    value: '_id',
                    label: 'classfyName',
                  }}
                />
              </Form.Item>
            </Form>
          </Card>
        </div>
      </div>
    </div>
  );
}

export default Index;
